
<!--我的报名，赛事列表改用formpreview进行显示。标题为赛事名称，右侧显示参赛号（如果已分配）。列表项：姓名、项目、参赛号、比赛日期、比赛地点、报名状态、完赛状态（完赛成绩、DNS、DNF）点击后显示报名详情预览，信息不折叠，关联操作，同现在我的报名里的关联操作。 -->
<template>
  <div class="user_racelist" id='user_racelist'>
    <drawer :show.sync="drawerVisibility" :show-mode="showModeValue" :placement="showPlacementValue" :drawer-style="{'background-color':'#35495e', width: '200px'}" style="height:100vh">

      <div slot="drawer">
        1111
      </div>
      <!--
      <scroller height="-120" lock-x scrollbar-y use-pullup @on-pullup-loading="load" ref="demo1" v-model="demo4Value">

        <div>
          <card>
            <div slot="content" class="card-padding">
              <panel style="position:relative" header="" :list="list" :type="type"></panel>
            </div>
          </card>
        </div>

        <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
          <span v-show="demo4Value.pullupStatus === 'default'"></span>
          <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
          <span v-show="demo4Value.pullupStatus === 'loading'">
            <spinner type="ios-small"></spinner>
          </span>
        </div>

      </scroller>
-->
      <view-box v-if='show1' ref="viewBox" style="height:100%;">
        <x-header :left-options="{backText: ''}" style="color:white" title="use prop:title">
          <span slot="overwrite-title">{{title}}</span>
          <a href="./#/racelist" style="font-size:24px" slot="right">
            <i class="fa fa-home fa-fw"></i>
          </a>
        </x-header>

        <div class="index-topf" v-if='!isSearch'>

          <h2>报名查询</h2>
          <group class="top-group">
            <x-input class="weui-vcode" v-model="indexNumber" :placeholder="$t('index.enter')" :is-type="isIdNumber">
            </x-input>
            <!--<x-input placeholder="请填写验证码" v-model="code" class="weui-vcode">-->
            <!--<x-button :disabled='clock' slot="right" type="primary" @click.native="countDown" mini>{{codeMessage}}-->
            <!--</x-button>
        </x-input>-->

          </group>

          <div style="padding-left: 10px;padding-right: 10px;margin-top: 10px;margin-bottom: 10px">
            <x-button type="primary" :disabled="buttonFlag" @click.native="search">查询</x-button>
          </div>

        </div>

        <div v-if='isSearch'>
          <scroller v-if='!show' height="-100" lock-x scrollbar-y :scroll-bottom-offset='0' use-pullup @on-pullup-loading="load" ref="demo1" v-model="demo4Value">

            <div>
              <Mypreview v-if='item' v-for='(item,index) in listData' :key='index' :list='item'></Mypreview>
            </div>

            <div v-if='!stop&&!show' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
              <span v-show="demo4Value.pullupStatus === 'default'"></span>
              <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
              <span v-show="demo4Value.pullupStatus === 'loading'">
                <spinner type="ios-small">11</spinner>
              </span>
            </div>

          </scroller>

          <div style="text-align: center" v-if='show'>
            <p style="margin-top: 30px;">您没有报名</p>
          </div>
        </div>

        <myFooter :page="pageConfig"></myFooter>
      </view-box>

    </drawer>

    <div>

    </div>

  </div>

</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
const countTime = 60; //倒数计时60秒

import Myheader from "@/common/components/myheader.vue";
import { cookie } from "vux";
import myFooter from "@/common/components/myfooter.vue";
import Mypreview from "@/common/components/mypreview.vue";

//import {host} from "@/api/config";
//let host = "http://jiangtao.v3.ihuipao.com/";

import {
  Card,
  Panel,
  XHeader,
  Search,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  Scroller,
  ViewBox,
  Spinner,
  Flexbox,
  Drawer,
  FlexboxItem,
  TransferDomDirective as TransferDom
} from "vux";

import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";
import CircleMenu from "vue-circle-menu";
import mixin from "@/common/js/mixin";
import { isIdNumber, setTitle } from "@/common/js/main.js";
import { setTimeout } from "timers";
import { resolve } from "path";

export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      buttonFlag: true,
      indexNumber: "",
      title: "",
      isSearch: false,
      show1: false,
      show: false,
      listData: [],
      raceArray: [],
      showMore: true,
      type: "5",
      pageIndex: 5,
      config: {
        perpage: 5, //分页数量
        page: 1, //当前页数
        hasmorepage: false //是否还有分页
      },
      searchConfig: {},
      showModeValue: "overlay",
      showPlacementValue: "right",
      stop: false,
      drawerVisibility: false,
      demo4Value: {
        pullupStatus: "default"
      },
      pageConfig: window.pageConfig,
      value: "",
      list: [],
      isShow: false,
    };
  },
  computed: {},
  beforeCreate() {},
  created() {
    if (
      //如果没有_sid就去登录
      typeof cookie.get("_sid") == "undefined" ||
      window.localStorage.getItem("isLogin") == "false"
    ) {
      this.isSearch = false;

      this.show1 = true;
      this.title = "报名查询";
      setTitle(this.title);

      this.show = false;
      //this.getList();
      //this.$router.push({ path: "login" });
    } else {
      this.title = "我的报名";
      this.isSearch = true;
      setTitle(this.title);

      this.show = false;
      this.getList();
    }
  },
  mounted() {},
  methods: {
    search() {},
    isIdNumber: function(value) {
      this.buttonFlag = !isIdNumber(value) && this.code != "";
      return {
        valid: isIdNumber(value),
        msg: "请输入正确的证件号"
      };
    },
    goLink(routerName, raceId) {
      let _this = this;
      window.raceId = raceId;
      _this.$router.push({ path: routerName, query: { race_id: raceId } });
    },
    userApply1(id, index, raceMessage) {
      return this.axios.post(
        //`${host}registration/fetch`,
        `${host}user/auth/regitration`,
        qs.stringify({
          account: window.localStorage.getItem("account"),
          raceid: id
        })
      );
    },
    userApply(id, index, raceMessage) {
      this.axios
        .post(
          `${host}user/auth/regitration`,
          qs.stringify({
            account: window.localStorage.getItem("account"),
            raceid: id
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            response.data.data[0].raceMessage = raceMessage[index];
            this.listData.push(response.data.data[0]);

            if (this.listData.length == 0) {
              _this.show1 = true;
            }

            //this.$refs.demo1.refresh()

            //console.log(this.listData);

            //console.log(response.data.data[index])
            //mock

            //this.listData[0].editable = 1;

            // if (this.listData.length == 0) {
            //   this.$vux.toast.show({
            //     type: "warn",
            //     text: this.$t("index.nofound")
            //   });
            // }
          } else {
            // this.$vux.toast.show({
            //   type: "warn",
            //   text: response.data.msg
            // });
          }
        });
    },
    load() {
      let _this = this;
      this.demo4Value.pullupStatus = "up";

      this.pageIndex += 5;

      this.getList(this.searchConfig);

      this.$nextTick(() => {
        setTimeout(function() {
          _this.$refs.demo1.reset();
        }, 3000);
      });
    },
    getList(config) {
      let _this = this;
      config = Object.assign({ perpage: this.config.perpage }, config);

      if (!!this.stop) {
        return;
      }
      //alert(this.pageIndex)

      config = {
        page: this.pageIndex
      };

      axios.post(`${host}user/auth/mysign`, qs.stringify(config)).then(
        response => {
          if (response.data.code == "200") {
            //console.log(response.data.data)
            console.log("--");
            console.log(this.show1);

            console.log(response);

            if (
              response.data.data.total == 0 ||
              typeof response.data.data.total == "undefined"
            ) {
              this.show = true;
              this.show1 = true;
            }

            console.warn(response.data.data.total);

            //this.stop = true;

            // response.data.data.data.forEach((item, index) => {
            //   this.list.forEach((item1, index1) => {
            //     if (item.id == item1.id) {
            //       response.data.data.data.splice(index,1)
            //     }
            //   });
            // });
            //console.warn(response.data.data.data);

            //var myarray = [];

            // var _reduce = function(array, key) {
            //   var arr = array;
            //   var hash = {};
            //   arr = arr.reduce(function(item, next) {
            //     hash[next[key]]
            //       ? ""
            //       : (hash[next[key]] = true && item.push(next));
            //     return item;
            //   }, []);
            //   return arr;
            // };

            //alert(JSON.stringify(_reduce(this.list , "src")))
            //myarray = this.list.concat(response.data.data.data);
            //console.warn('过滤前')
            //console.warn(myarray)
            //myarray = _reduce(myarray, "id");
            //console.warn('过滤后')
            //console.warn(myarray)
            //this.list = myarray;

            this.total = response.data.total;

            //this.list=this.list.concat(response.data.data.data)
            console.log(this.list);
            this.list = response.data.data.data;
            if (this.list.length == 0) {
              this.show = true;
            }

            let array = [];

            //this.list  首先获取 我所报名的赛事

            this.list.forEach((item, index) => {
              array.push(_this.userApply1(item.id, index));
            });
            /*
            axios.all(getpagelist).then(
              axios.spread(function() {
                // Both requests are now complete
                for (let i = 0; i < arguments.length; i++) {
                  _this.content.push(arguments[i].data.data.content);
                }
                _this.showContent = true;
              })
            );
            */

            //再根据才是 获取报名信息
            let arrayList = [];
            axios.all(array).then(
              axios.spread(function(response) {
                //console.warn(response);
                if (response.data.code == 0) {
                  _this.$vux.toast.show({
                    type: "warn",
                    text: "请先绑定证件号"
                  });
                  _this.show = true;
                  _this.show1 = true;

                  return;
                }
                // Both requests are now complete
                for (let i = 0; i < arguments.length; i++) {
                  //_this.list[i].message = arguments[i].data.data;

                  if (arguments[i].data.data.length != 0) {
                    let obj = {};
                    obj = arguments[i].data.data[0];

                    obj.raceMessage = _this.list[i];

                    arrayList.push(obj);

                    _this.demo4Value.pullupStatus = "default";

                    if (_this.pageIndex >= response.data.data.total) {
                      _this.stop = true;
                    }
                    _this.show1 = true;
                  }
                }

                console.log(arrayList);

                //_this.listData=arrayList
                _this.$set(_this, "listData", arrayList);
              })
            );

            //在用报名信息的eventid 找到赛事信息
          } else {
            if (response.data.code == "0") {
              this.show = true;
              this.show1 = true;
            } else {
              this.$vux.toast.show({
                type: "warn",
                text: response.data.msg
              });
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Card,
    Panel,
    XHeader,
    Search,
    myFooter,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    ViewBox,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Myheader,
    Confirm,
    Flexbox,
    Drawer,
    Scroller,
    Spinner,
    CircleMenu,
    FlexboxItem,
    Mypreview
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
body,
html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

#user_racelist h2 {
  font-size: 30px;
  line-height: 2;
  text-align: center;
  color: #25a2ff;
}

#user_racelist .weui-form-preview__hd {
  text-align: left;
}

#user_racelist .weui-form-preview__hd .weui-form-preview__label {
  float: none;
  display: inline-block;
  max-width: 40%;
}

#user_racelist .weui-form-preview__hd .weui-form-preview__value {
  float: right;
  max-width: 50%;
}

#user_racelist .vux-header-title-area {
  text-align: center;
  line-height: 40px;
}

#user_racelist .weui-tab__panel {
  padding-bottom: 0px;
}
</style>






